<style>
    .pro-detail{

    }
    .pad20{
        padding: 20px;
    }
    .pro-tab-box{

    }
    .mb-1{
        margin-bottom: -1px;
    }
    .pro-info-params{
        float: left;
        width: 130px;
        margin-right: -1px;
        padding-left: 20px;
        height: 40px;
        line-height: 40px;
        background-color: #f4f4f4;
        border: 1px solid #ddd;
    }
    .pro-info-table{
        display: table-cell;
        *display:inline-block;
        width: 2000px;
        height: 38px;
        line-height: 38px;
        padding-left: 15px;
        border: 1px solid #ddd;
    }
    .border-right-none{
        border-right: none;
    }
    /*被保人信息*/
    .insured-title,.beneficiary-title,.premium-period{
        width:100%;
        height:50px;
        line-height:50px;
        margin-bottom: 15px;
        background: #edf2f6;
        overflow: hidden;
    }
    .insured{
        float:left;
        font-size: 20px;
        margin-left: 20px;
        color:#000;

    }
    .insured-name{
        float: left;
        margin-left: 20px;
    }
    .bg-1{
        background: #fff;
    }
    .beneficiary{
        display: inline-block;
        line-height:60px;
    }
    .beneficiary-title {
        position:relative;
    }
    .beneficiary:after{
        content: '';
        position: absolute;
        width: 100%;
        height: 1px;
        border-bottom: 1px dotted #d4d4d4;
        top: 30px;
        left:10%;
    }
    .period{
        float:left;
        width:320px;
        margin-left: 15px;

    }
    .period span,.premium span{
        display: inline-block;
        margin-left: 15px;
        color:black;
        font-weight: 500;
        font-size: 18px;
    }
    .premium{
        float:left;

    }
    .premium .red{
        color:red ;
        font-weight: normal;
    }
    .fr1{
        position:absolute;
        right:0;
        top:50%;
        transform: translate(0,-50%);
        z-index: 9999999;
    }
    .paging{
        position: fixed;
        bottom: 0;
        width: 100%;
        height:70px;
        background: #fff;
        z-index: 99999;

    }
    .pagesContent{
        position: fixed;
        bottom: 0;
        width:100%;
        height:100px;
    }
    .paging{
        float:right;
    }
    @media (max-width: 1200px) {
        .border-right-none{
            border-right:1px solid #ddd;
        }
        .mb-2{
            margin-bottom: -1px;
        }
        .beneficiary:after{
            content: '';
            position: absolute;
            width: 100%;
            height: 1px;
            border-bottom: 1px dotted #d4d4d4;
            top: 30px;
            left:20%;
        }
    }







</style>
<template>
    <div>
        <product-title></product-title>
        <div class="pro-detail pad20">
            <Tabs type="card">
                <TabPane label="保险信息">
                    <div class="pro-tab-box">
                        <div class="">
                            <Row>
                                <Col span="24" class="mb-1">
                                    <div class="pro-info-params">
                                        保险产品名称
                                    </div>
                                    <div class="pro-info-table">
                                        {{policyform.name ? policyform.name : "暂无"}}
                                    </div>
                                </Col>
                                <Col :lg="12" :xs="24" class="mb-1">
                                    <div class="pro-info-params">
                                        保险期间
                                    </div>
                                    <div class="pro-info-table border-right-none">
                                        终身
                                    </div>
                                </Col>
                                <Col :lg="6" :xs="24" class="mb-1">
                                    <div class="pro-info-params">
                                        保单号码
                                    </div>
                                    <div class="pro-info-table border-right-none">
                                        {{policyform.insure_num ? policyform.insure_num : "暂无"}}
                                    </div>
                                </Col>
                                <Col :lg="6" :xs="24" class="mb-1">
                                    <div class="pro-info-params">
                                        保单号码
                                    </div>
                                    <div class="pro-info-table">
                                        有效
                                    </div>
                                </Col>

                                <Col :lg="12" :xs="24" class="mb-1">
                                    <div class="pro-info-params">
                                        资费方式
                                    </div>
                                    <div class="pro-info-table border-right-none">
                                        {{policyform.pay_type ? policyform.pay_type : "暂无"}}
                                    </div>
                                </Col>
                                <Col :lg="6" :xs="24" class="mb-1">
                                    <div class="pro-info-params">
                                        保险费合计
                                    </div>
                                    <div class="pro-info-table border-right-none">
                                        ¥520000.00元
                                    </div>
                                </Col>
                                <Col :lg="6" :xs="24" class="mb-1">
                                    <div class="pro-info-params">
                                        缴费日期
                                    </div>
                                    <div class="pro-info-table">
                                        2016-12-26
                                    </div>
                                </Col>

                                <Col :lg="12" :xs="24" class="mb-1">
                                    <div class="pro-info-params">
                                        承保时间
                                    </div>
                                    <div class="pro-info-table border-right-none">
                                        {{policyform.underwrite_date ? policyform.underwrite_date : "暂无"}}
                                    </div>
                                </Col>
                                <Col :lg="6" :xs="24" class="mb-1">
                                    <div class="pro-info-params">
                                        资费区间
                                    </div>
                                    <div class="pro-info-table border-right-none">
                                        ¥520000.00元
                                    </div>
                                </Col>
                                <Col :lg="6" :xs="24" class="mb-1">
                                    <div class="pro-info-params">
                                        投保时间
                                    </div>
                                    <div class="pro-info-table">
                                        2016-12-26
                                    </div>
                                </Col>

                                <Col :lg="12" :xs="24" class="mb-2">
                                    <div class="pro-info-params " >
                                        回执交回时间
                                    </div>
                                    <div class="pro-info-table border-right-none ">
                                        2016-12-26
                                    </div>
                                </Col>
                                <Col :lg="6" :xs="24" class="mb-2">
                                    <div class="pro-info-params ">
                                        合同生效时间
                                    </div>
                                    <div class="pro-info-table border-right-none ">
                                        2016-12-26
                                    </div>
                                </Col>
                                <Col :lg="6" :xs="24" class="">
                                    <div class="pro-info-params">
                                        电话回访时间
                                    </div>
                                    <div class="pro-info-table">
                                        2016-12-26
                                    </div>
                                </Col>
                            </Row>

                        </div>
                    </div>
                </TabPane>
                <TabPane label="投保人信息">

                </TabPane>
                <TabPane label="被保人信息">
                    <Row>
                        <Col span="24" class="insured-title">
                            <div class="insured">被保人</div>
                            <div class="insured-name">{{insuredInfo.name}}</div>
                            <Button class="fr1" type="primary" :icon="isShow ? 'ios-arrow-up' : 'ios-arrow-down'"  @click="showHide">{{isShow ? "折叠" : "展开"}}</Button>
                        </Col>
                        <div v-show="isShow">
                            <Col :lg="12" :xs="24"  class="mb-1">
                                <div class="pro-info-params">
                                    被保人
                                </div>
                                <div class="pro-info-table border-right-none">
                                    {{insuredInfo.name}}
                                </div>
                            </Col>
                            <Col :lg="6" :xs="24"  class="mb-1">
                                <div class="pro-info-params">
                                    性别
                                </div>
                                <div class="pro-info-table border-right-none">
                                    {{insuredInfo.sex == 1 ? "男" : "女"}}
                                </div>
                            </Col>
                            <Col :lg="6" :xs="24"  class="mb-1">
                                <div class="pro-info-params">
                                    出生日期
                                </div>
                                <div class="pro-info-table">
                                    {{insuredInfo.birthday}}
                                </div>
                            </Col>
                            <Col :lg="12" :xs="24" class="mb-1">
                                <div class="pro-info-params">
                                    证件类型
                                </div>
                                <div class="pro-info-table border-right-none">
                                    {{insuredInfo.id_type ? insuredInfo.id_type : " 暂无"}}
                                </div>
                            </Col>
                            <Col :lg="6" :xs="24" class="mb-1">
                                <div class="pro-info-params">
                                    证件号码
                                </div>
                                <div class="pro-info-table border-right-none">
                                    {{insuredInfo.id_number ? insuredInfo.id_number  : "暂无"}}
                                </div>
                            </Col>
                            <Col :lg="6" :xs="24" class="mb-1">
                                <div class="pro-info-params">
                                    与被保人关系
                                </div>
                                <div class="pro-info-table">
                                    本人
                                </div>
                            </Col>

                            <Col :lg="12" :xs="12">
                                <div class="pro-info-params">
                                    联系电话
                                </div>
                                <div class="pro-info-table border-right-none">
                                    {{insuredInfo.mobile ? insuredInfo.mobile : "暂无"}}
                                </div>
                            </Col>
                            <Col :lg="12" :xs="12">
                                <div class="pro-info-params">
                                    电子邮箱
                                </div>
                                <div class="pro-info-table ">
                                    {{insuredInfo.email ? insuredInfo.email : "暂无"}}
                                </div>
                            </Col>
                            <!--受益人信息1-->
                            <div class="beneficiary-list" v-for="(beneficiary,index) in beneficiaryList">

                                <Col span="24" class="beneficiary-title bg-1">
                                    <div class="beneficiary">受益人信息({{index + 1}})</div>
                                </Col>
                                <Col :lg="12" :sx="24" class="mb-1">
                                    <div class="pro-info-params">
                                        受益人
                                    </div>
                                    <div class="pro-info-table border-right-none">
                                        {{beneficiary.name}}
                                    </div>
                                </Col>
                                <Col :lg="6" :xs="24" class="mb-1">
                                    <div class="pro-info-params">
                                        性别
                                    </div>
                                    <div class="pro-info-table border-right-none">
                                        {{beneficiary.sex == 1 ? "男" : "女"}}
                                    </div>
                                </Col>
                                <Col :lg="6" :xs="24" class="mb-1">
                                    <div class="pro-info-params">
                                        出生日期
                                    </div>
                                    <div class="pro-info-table">
                                        {{beneficiary.birthday}}
                                    </div>
                                </Col>

                                <Col :lg="12" :xs="24" class="mb-1">
                                    <div class="pro-info-params">
                                        证件类型
                                    </div>
                                    <div class="pro-info-table border-right-none">
                                        {{beneficiary.id_type}}
                                    </div>
                                </Col>
                                <Col :lg="6" :xs="24" class="mb-1">
                                    <div class="pro-info-params">
                                        证件号码
                                    </div>
                                    <div class="pro-info-table border-right-none">
                                        {{beneficiary.id_number}}
                                    </div>
                                </Col>
                                <Col :lg="6" :xs="24" class="mb-1">
                                    <div class="pro-info-params">
                                        与投保人关系
                                    </div>
                                    <div class="pro-info-table">
                                        {{beneficiary.relation ? beneficiary.relation : "暂无"}}
                                    </div>
                                </Col>

                                <Col :lg="12" :xs="24" class="">
                                    <div class="pro-info-params">
                                        联系电话
                                    </div>
                                    <div class="pro-info-table border-right-none">
                                        {{beneficiary.mobile ? beneficiary.mobile : "暂无"}}
                                    </div>
                                </Col>
                                <Col :lg="6" :xs="24" class="">
                                    <div class="pro-info-params">
                                        电子邮箱
                                    </div>
                                    <div class="pro-info-table border-right-none">
                                        {{beneficiary.mobile ? beneficiary.mobile :"暂无"}}
                                    </div>
                                </Col>
                                <Col :lg="6" :xs="24" class="">
                                    <div class="pro-info-params">
                                        收益比例
                                    </div>
                                    <div class="pro-info-table">
                                        {{beneficiary.scale ? beneficiary.scale + "%" : "暂无"}}
                                    </div>
                                </Col>
                            </div>

                            <!--受益人信息2-->

                        </div>

                    </Row>

                </TabPane>
                <TabPane label="业务员信息">

                </TabPane>
                <!--续期记录-->
                <TabPane label="续期记录">
                    <Row>
                        <div class="logList" v-for="item in data1">
                            <Col span="24" class="premium-period">
                                <div class="period">年期<span class="period-val">第  20 年</span></div>
                                <div class="premium">保费<span class="premium-val red">{{item.premium}}</span></div>
                                <Button v-model="item.state1" class="fr1" type="primary"  :icon="item.state1 ? 'ios-arrow-up' : 'ios-arrow-down'"  @click="item.state1 = !item.state1">{{item.state1 ? "折叠" : "展开"}}</Button>
                            </Col>
                            <Col span="24">
                                <div v-show="item.state1">
                                    <Table border  :columns="columns" :data="data1"></Table>
                                </div>
                            </Col>
                        </div>
                    </Row>
                </TabPane>
            </Tabs>
            <!--<div class="paging">-->
            <!--<div>-->
            <!--<Page :total="10" show-sizer show-total></Page>-->
            <!--</div>-->
            <!--</div>-->
            <Col :md="24" :lg="8" class="pagesContent">
            <Page :total="20" show-sizer show-total class="paging" placement="top"></Page>
            </Col>
        </div>

    </div>
</template>
<script>
    import productTitle from '../../components/productTitle'
    import {policyGetDetail} from "../../api/policy"
    export default {
        data () {
            return {
                isShow:false,
                premium:500021.00,
                columns:[
                    {title:"被保人",key:"insured_name"},
                    {title:"险种名称",key:"name"},
                    {title:"保费",key:"premium"}
                ],
                policyform:{},
                data1:[],
                //受益人列表
                beneficiaryList:[],
                //被保人信息
                insuredInfo:"",



            }
        },
        components: {
            productTitle
        },
        mounted () {
            this.premium = this.filterCount(this.premium);
            this.getDetailData();
        },

        methods: {
            //千位分隔符
            filterCount(value){
                if(!value) return '0.00';
                var intPart = Number(value).toFixed(0);
                var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
                var floatPart = ".00";
                var value2Array = value.toString().split(".");
                if(value2Array.length == 2) {
                    floatPart = value2Array[1].toString();
                    if(floatPart.length == 1) {
                        return intPartFormat + "." + floatPart + '0';
                    } else {
                        return intPartFormat + "." + floatPart;
                    }
                } else {
                    return intPartFormat + floatPart;
                }
            },
            showHide(){
                this.isShow = !this.isShow;
            },
            getDetailData(){
                let _params ={
                    // policy_id:this.$route.params.id
                    policy_id:"5aa656ded77d5e5ffa65ee04"
                };
                console.log(_params);
                new Promise((resolve,reject) => {
                    policyGetDetail(_params).then(res => {
                        console.log(res);
                        if(res.data.err == 0){
                            this.beneficiaryList = res.data.data.beneficiaries;
                            this.insuredInfo = res.data.data.applicant;
                            this.policyform = res.data.data.policyform;
                            var data1 = res.data.data.insurances;
                            for(let item of data1){
                                item.state1 = false;
                                item.premium = this.filterCount(item.premium);
                                this.data1.push(item);
                            }
                        }else{
                            this.$Message.error(res.data.info);
                        }
                        resolve();
                    }).catch(error =>{
                        reject(error);
                    })
                })
            }
        }
    }
</script>


